import { Layout, Playground, Attributes } from 'lib/components'
import { Tag, Spacer } from 'components'

export const meta = {
  title: 'Tag',
  group: 'Data Display',
}

## Tag

Display a unique keyword, optionally as a part of a set.

<Playground
  scope={{ Tag }}
  code={`
<div>
  <Tag>Status: Unstable</Tag>
</div>
`}
/>

<Playground
  title="Types"
  desc="Show different states with colors."
  scope={{ Tag, Spacer }}
  code={`
<>
  <Tag type="success">Success</Tag>
  <Spacer y={.5} />
  <Tag type="warning">Warning</Tag>
  <Spacer y={.5} />
  <Tag type="error">Error</Tag>
  <Spacer y={.5} />
  <Tag type="secondary">Secondary</Tag>
  <Spacer y={.5} />
  <Tag type="lite">Lite</Tag>
</>
`}
/>

<Playground
  title="Invert"
  desc="Invert color and background."
  scope={{ Tag, Spacer }}
  code={`
<>
  <Tag type="default" invert>Default</Tag>
  <Spacer y={.5} />
  <Tag type="success" invert>Success</Tag>
  <Spacer y={.5} />
  <Tag type="warning" invert>Warning</Tag>
  <Spacer y={.5} />
  <Tag type="error" invert>Error</Tag>
  <Spacer y={.5} />
  <Tag type="secondary" invert>Secondary</Tag>
</>
`}
/>

<Attributes edit="/pages/en-us/components/tag.mdx">
<Attributes.Title>Tag.Props</Attributes.Title>

| Attribute  | Description                 | Type                  | Accepted values          | Default   |
| ---------- | --------------------------- | --------------------- | ------------------------ | --------- |
| **type**   | tag type                    | [TagTypes](#tagtypes) | -                        | `default` |
| **invert** | invert color and background | `boolean`             | -                        | `false`   |
| ...        | native props                | `HTMLAttributes`      | `'id', 'className', ...` | -         |

<Attributes.Title>TagTypes</Attributes.Title>

```ts
type TagTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
